---
title: Card
description: Displays a card with optional header, content and footer.
component: Card
---

<LiveComponent language="tsx">
{`
  import {
    Card,
    CardHeader,
    CardTitle,
    CardContent,
    CardFooter,
    Divider
  } from "@pipecat-ai/voice-ui-kit";

  <Card>
    <CardHeader>
      <CardTitle className="text-lg">Card Title</CardTitle>
    </CardHeader>
    <CardContent>
      General purpose card content.
    </CardContent>
    <Divider />
    <CardFooter>
      Card Footer
    </CardFooter>
  </Card>
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    variant: {
      description: "The visual style variant of the card",
      type: '"default" | "destructive" | "success"',
      required: false,
      default: '"default"',
    },
    size: {
      description: "The size of the card",
      type: '"sm" | "md" | "lg" | "xl"',
      required: false,
      default: '"md"',
    },
    background: {
      description: "The background pattern for the card",
      type: '"none" | "scanlines" | "grid" | "stripes"',
      required: false,
      default: '"none"',
    },
    rounded: {
      description: "The border radius of the card",
      type: '"none" | "sm" | "md" | "lg" | "xl"',
      required: false,
      default: "size value",
    },
    shadow: {
      description: "The shadow depth of the card",
      type: '"none" | "xshort" | "short" | "long" | "xlong"',
      required: false,
      default: '"none"',
    },
    withElbows: {
      description: "Whether to show decorative corner elements",
      type: "boolean",
      required: false,
      default: "false",
    },
    withGradientBorder: {
      description: "Whether to use a gradient border. Not compatible with background patterns.",
      type: "boolean",
      required: false,
      default: "false",
    },
    className: {
      description: "Additional CSS classes to apply",
      type: "string",
      required: false,
      default: "undefined",
    },
  }}
/>

## Usage

### Card Sizing

<LiveComponent language="tsx">
{`
  import {
    Card,
    CardHeader,
    CardTitle,
    CardContent,
  } from "@pipecat-ai/voice-ui-kit";

  <>
    <Card size="sm">
      <CardHeader>
        <CardTitle>Small Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>size="sm"</pre>
      </CardContent>
    </Card>

    <Card size="md">
      <CardHeader>
        <CardTitle>Medium Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>size="md"</pre>
      </CardContent>
    </Card>

    <Card size="lg">
      <CardHeader>
        <CardTitle>Large Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>size="lg"</pre>
      </CardContent>
    </Card>

    <Card size="xl">
      <CardHeader>
        <CardTitle>Extra Large Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>size="xl"</pre>
      </CardContent>
    </Card>
  </>
`}
</LiveComponent>

### Variants

<LiveComponent language="tsx">
{`
  import {
    Card,
    CardHeader,
    CardTitle,
    CardContent,
  } from "@pipecat-ai/voice-ui-kit";

  <>
    <Card variant="destructive" className="w-full">
      <CardHeader>
        <CardTitle>Destructive Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>variant="destructive"</pre>
      </CardContent>
    </Card>
    <Card variant="success" className="w-full">
      <CardHeader>
        <CardTitle>Success Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>variant="success"</pre>
      </CardContent>
    </Card>
  </>
`}
</LiveComponent>


### Background

<LiveComponent language="tsx">
{`
  import {
    Card,
    CardHeader,
    CardTitle,
    CardContent,
  } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4 w-full">
    <Card background="stripes">
      <CardHeader>
        <CardTitle>Stripe Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>background="stripes"</pre>
      </CardContent>
    </Card>
    <Card background="stripes" variant="destructive">
      <CardHeader>
        <CardTitle>Destructive Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>background="stripes" variant="destructive"</pre>
      </CardContent>
    </Card>
    <Card background="stripes" variant="success">
      <CardHeader>
        <CardTitle>Destructive Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>background="stripes" variant="success"</pre>
      </CardContent>
    </Card>
    <Card background="scanlines">
      <CardHeader>
        <CardTitle>Stripe Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>background="stripes"</pre>
      </CardContent>
    </Card>
    <Card background="grid">
      <CardHeader>
        <CardTitle>Destructive Card</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>background="stripes" variant="success"</pre>
      </CardContent>
    </Card>
  </div>
`}
</LiveComponent>


### Border Radius

<LiveComponent language="tsx">
{`
  import {
    Card,
    CardHeader,
    CardTitle,
    CardContent,
  } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4 w-full">
    <Card rounded="none">
      <CardHeader>
        <CardTitle>No Rounded Corners</CardTitle>
      </CardHeader>
    </Card>
    <Card rounded="sm">
      <CardHeader>
        <CardTitle>Small Rounded Corners</CardTitle>
      </CardHeader>
    </Card>
    <Card rounded="md">
      <CardHeader>
        <CardTitle>Medium Rounded Corners</CardTitle>
      </CardHeader>
    </Card>
    <Card rounded="lg">
      <CardHeader>
        <CardTitle>Large Rounded Corners</CardTitle>
      </CardHeader>
    </Card>
    <Card rounded="xl">
      <CardHeader>
        <CardTitle>Extra Large Rounded Corners</CardTitle>
      </CardHeader>
    </Card>
  </div>
`}
</LiveComponent>

### Shadows

<LiveComponent language="tsx">
{`
  import {
    Card,
    CardHeader,
    CardTitle,
    CardContent,
  } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4 w-full">
    <Card shadow="none">
      <CardHeader>
        <CardTitle>No Shadow</CardTitle>
      </CardHeader>
    </Card>
    <Card shadow="xshort">
      <CardHeader>
        <CardTitle>X-Short Shadow</CardTitle>
      </CardHeader>
    </Card>
    <Card shadow="short">
      <CardHeader>
        <CardTitle>Short Shadow</CardTitle>
      </CardHeader>
    </Card>
    <Card shadow="long">
      <CardHeader>
        <CardTitle>Long Shadow</CardTitle>
      </CardHeader>
    </Card>
    <Card shadow="xlong">
      <CardHeader>
        <CardTitle>X-Long Shadow</CardTitle>
      </CardHeader>
    </Card>
    <Card variant="destructive" shadow="short">
      <CardHeader>
        <CardTitle>Destructive Short Shadow</CardTitle>
      </CardHeader>
    </Card>
    <Card variant="success" shadow="short">
      <CardHeader>
        <CardTitle>Success Short Shadow</CardTitle>
      </CardHeader>
    </Card>
  </div>
`}
</LiveComponent>

### Elbows

Note: will not work with rounded corners.

<LiveComponent language="tsx">
{`
  import {
    Card,
    CardHeader,
    CardTitle,
    CardContent,
  } from "@pipecat-ai/voice-ui-kit";

  <>
    <Card className="w-full" withElbows={true}>
      <CardHeader>
        <CardTitle>Card with Elbows</CardTitle>
      </CardHeader>
      <CardContent>
        <pre>withElbows={true}</pre>
      </CardContent>
    </Card>
  </>
`}
</LiveComponent>

### Gradient Border

<Callout>
Note: Using gradient border applies only when a `background` variant is not set.
</Callout>

<LiveComponent language="tsx">
{`
  import {
    Card,
    CardHeader,
    CardTitle,
    CardContent,
  } from "@pipecat-ai/voice-ui-kit";

  <>
    <Card className="w-full" withGradientBorder shadow="xlong">
      <CardHeader>
        <CardTitle>With Gradient Border (makes shadow stand out more)</CardTitle>
      </CardHeader>
    </Card>
  </>
`}
</LiveComponent>